{include file="common/header" /}
<style>
    .layui-tree-iconClick .layui-icon {
        font-size: 0;
    }

    .layui-tree-iconClick.layui-tree-icon .layui-icon {
        font-size: 12px;
    }
</style>
<div style="margin: 10px 0 0 -50px">
    {eq name="$type" value="1"}
    <div class="layui-btn-container" style="margin-left: 65px;">
        <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary" lay-demo="checkAll">全选</button>
        <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary" lay-demo="noChoice">全不选选</button>
    </div>
    {/eq}

    <form class="layui-form" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">权限:</label>
            <div class="layui-input-block">
                <div id="node"></div>
            </div>
        </div>

        {eq name="$type" value="1"}
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" lay-submit lay-filter="reset">重置</button>
                <button class="layui-btn" lay-submit lay-filter="sub">立即提交</button>
            </div>
        </div>
        {/eq}
    </form>

</div>
<script src="__COMMON__/expand/layui/layui.js"></script>
<script>
    var checked = [];
    layui.use(['tree', 'jquery', 'element', 'layer', 'util', 'form'], function () {
        var tree = layui.tree,
            $ = layui.jquery,
            form = layui.form,
            util = layui.util,
            layer = layui.layer,
            element = layui.element;

        get('node', render);

        //按钮事件
        util.event('lay-demo', {
            //全选
            checkAll: function (othis) {
                $('body').find('input[name="powername"]:not(:checked)').each(function () {
                    $(this).next().click();
                })
            }
            //全部不选
            , noChoice: function () {
                $('body').find('input[name="powername"]:checked').each(function () {
                    $(this).next().click();
                })
            }
        });

        //监听重置
        form.on('submit(reset)', function (data) {
            get('node', render);
            return false;
        });

        //监听提交
        form.on('submit(sub)', function (data) {
            var powere = [];
            $('body').find('input[name="powername"]:checked').each(function () {
                powere.push($(this).val())
            });
            $.post(
                '{:url("Role/powerSave")}',
                {roleid: '{$Think.get.roleid}', 'powere': powere},
                function (e) {
                    layer.msg(e.msg);
                    if (e.status == 200) {
                        window.setTimeout(function () {
                            parent.layer.closeAll();
                        }, 500);
                    }
                }, 'json');
            return false;
        });
    });

    function get(id, call) {
        layui.jquery.post('{:url("Role/power")}', {roleid: '{$Think.get.roleid}', type: '{$type}'}, function (e) {
            if (e.status == 400) {
                layer.msg(e.msg);
            } else {
                checked = e.checked
                call(id, e.data);
            }
        }, 'json');
    }

    function render(id, data) {
        var type = Number("{$type}");

        layui.tree.render({
            id: id,
            elem: '#' + id,  //绑定元素
            data: data,
            checkChild: false,
            showCheckbox: true,
        });
    }

    function reload() {
        get('node', render);
    }
</script>
{include file="common/foot" /}